<template>
  <div :class="[ns.blockName()]">
    <slot />
  </div>
</template>

<script>
export default {
  name: "z-button-group", // 修改组件名称为 z-button-group
};
</script>

<script setup>
import { defineProps, provide, toRefs } from "vue";
import { useNamespace } from "@ZUI/hooks";
const ns = useNamespace("button-group"); // 修改命名空间为 button-group

const props = defineProps({
  size: {
    type: String,
    default: "", // size:small,default,large
  },
});
/**
 * toRefs 返回的是一个包含响应式引用的对象，不能直接放在对象字面量中。
 * 可以使用展开运算符将其展开，然后再放在对象字面量中。
 */
provide("buttonGroupProvide", { ...toRefs(props) });
</script>

<style></style>
